<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<style>
    #app a{
        text-decoration: none;
        color: white;
    }
</style>
<body>
<div id="app">
    <header class="el-header" style="height: 60px; background-color: #545C64;"><div style="float: left; font-size: 22px; color: white; line-height: 60px;">
        erp管理平台
    </div> <div style="float: right; font-size: 14px; color: white; line-height: 60px;"><i class="el-icon-user-solid"></i> <div class="div1 el-dropdown"><span aria-haspopup="list" aria-controls="dropdown-menu-8666" role="button" tabindex="0" class=" el-dropdown-selfdefine" style="color: white;">
                        百里半<i class="el-icon-arrow-down el-icon--right"></i></span> <ul class="el-dropdown-menu el-popper" id="dropdown-menu-8666" style="display: none;"><li tabindex="-1" class="el-dropdown-menu__item"><!---->系统消息</li> <li tabindex="-1" class="el-dropdown-menu__item"><!---->个人主页</li> <li tabindex="-1" class="el-dropdown-menu__item btn1"><!----><button type="button" class="el-button el-button--text"><!----><!----><span>退出</span></button></li></ul></div></div></header>





    <el-row class="tac" style="height: 700px">
        <el-col :span="4">
            <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    text-color="white"
                    background-color="#545c64"
                    active-text-color="red">
                <el-submenu :index="fun.id" v-for="fun in functions">
                    <template slot="title">
                        <i :class="fun.icon"></i>
                        <span>{{fun.name}}</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="cfun.id" v-for="cfun in fun.subFunctions">
                            <el-badge v-if="cfun.id=='19'" :value="readyProduce" class="item">
                                <a :href="cfun.url" target="content">{{cfun.name}}</a>
                            </el-badge>
                            <a v-else :href="cfun.url" target="content">{{cfun.name}}</a>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-col>

        <el-main>
            <iframe style="width: 100%;height: 900px;border:0px" name="content" frameborder="false"></iframe>
        </el-main>

    </el-row>


</div>

<script>
    new Vue({
        el:"#app",
        data:{
            functions:[{id:"0",name:'',subFunctions:{id:"0",name:'',url:''},icon:''}],
            readyProduce:"0",
        },

        methods: {
            loadFunctions(){
                axios.get("/functions/username")
                    .then(res=>{
                        this.functions = res.data
                        this.functions.forEach(fun=>{
                            fun.id=fun.id.toString();
                        })
                    });
            },
            loadProductReadyOrder(){
                axios.get("/produce/readyOrder")
                    .then(res=>{
                        this.readyProduce=res.data;
                    });
            }

        },
        mounted(){
            this.loadFunctions();
            this.loadProductReadyOrder();
        }
    })
</script>
</body>
</html>